<!-- 修改手机号 -->
<template>
	<view class="updPass">
		<view class="warpper">
			<view class="nl-shadow-box">
				<view class="nl-flex-list">
					<text class="nl-margin-right">手机号</text>
					<u-input v-model="phone" type="text" placeholder="请输入手机号" class="nl-margin-right" />
					<view class="getCode" v-if="show"><button @click="getCode()">获取验证码</button></view>
					<view class="countdown" v-if="!show"><button>重新发送({{countdown}})</button></view>
				</view>
				<view class="nl-flex-list">
					<text class="nl-margin-right">验证码</text>
					<u-input v-model="code" type="text" placeholder="请输入验证码" />
				</view>
				<view class="button-lg">
					<button>提交</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				phone: '',
				code: '',
				codeText: '获取验证码',
				countdown: 60, //倒计时
				show: true //显示倒计时
			}
		},
		onLoad() {},
		methods: {
			// 获取验证码
			getCode() {
				this.show = false
				var that = this
				this.timer = setInterval(() => {
					that.countdown --
					if (that.countdown === 0) {
						that.show = true
						clearInterval(this.timer)
					}
				}, 1000)




				// if (this.countdown == 0) {
				// 	this.codeText = "获取验证码";
				// 	this.countdown = 60;
				// 	return;
				// } else {
				// 	this.codeText = "重新发送(" + this.countdown + ")";
				// 	this.countdown--;
				// }
				// var that = this
				// setTimeout(function() {
				// 	that.getCode()
				// }, 1000)
			}
		}
	}
</script>

<style lang="scss">
	// 获取验证码样式
	.getCode {
		display: inline-block;

		button {
			padding: 0 16rpx;
			height: 38rpx;
			display: flex;
			align-items: center;
			background-color: $uni-text-color-inverse;
			color: #1585FC;
			border-radius: 12rpx;
			border: none;
			font-size: $uni-font-size-sm;
			border: 3rpx solid #1585FC;
		}

		uni-button:active {
			box-shadow: none
		}

		uni-button:after {
			border: none;
		}
	}

	// 倒计时验证码样式
	.countdown {
		display: inline-block;

		button {
			padding: 0 16rpx;
			height: 38rpx;
			display: flex;
			align-items: center;
			background-color: $uni-text-color-inverse;
			color: #AFAFAF;
			border-radius: 12rpx;
			border: none;
			font-size: $uni-font-size-sm;
			border: 3rpx solid #AFAFAF;
		}

		uni-button:active {
			box-shadow: none
		}

		uni-button:after {
			border: none;
		}
	}
</style>
